<template>
    <div class="container">
        <header class="header">
            <el-button type="primary" @click="closePage">关闭</el-button>
        </header>
        <main class="main">
            <el-scrollbar>
                <div class="phone">
                    <iframe
                        id="myIframe"
                        ref="iframeRef"
                        :title="state.title"
                        :src="state.src"
                        frameBorder="0"
                        :allowTransparency="true"
                        :allowFullScreen="true"
                        :height="iframeHeight"
                        width="100%"
                        scrolling="no" />
                </div>
            </el-scrollbar>
            <div class="qrcode">
                <div class="title" @click="onPreent">手机预览</div>
                <div class="content">
                    <el-image :src="state.qrcodeUrl" />
                    <div class="desc">微信扫码预览</div>
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import { getMiniAppQrcodeHook } from '@/hooks';
import storage from '@/commons/storage';
import { getPreviewUrlNew } from '@/commons/utils';
import { useRoute } from 'vue-router';
import { reactive, ref, nextTick, onMounted, onUnmounted } from 'vue';

const queryId = useRoute().query.id;
const state = reactive({
    title: 'H5',
    src: getPreviewUrlNew('/pages/previewGoods/index', { id: queryId }),
    qrcodeUrl: ''
});
const iframeHeight = ref(887);
const getQrCodeUrl = async () => {
    const path = 'pages-cart/good/index';
    const params = `goodsId=${queryId}&shopId=${storage.get('ZW-SHOPID')}`;
    const res = await getMiniAppQrcodeHook(path, params);
    state.qrcodeUrl = res.data.url;
};
const closePage = () => {
    window.opener = null;
    window.open('', '_self', '');
    window.close();
};

const init = async () => {
    await nextTick();
    window.addEventListener('message', event => {
        const data = event.data;
        if (data.cmd === 'goodsHeight') {
            iframeHeight.value = data.height;
        }
    });
};
const destroyIframe = () => {
    let iframe = document.getElementById('myIframe');
    iframe.src = 'about:blank';
    try {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.document.clear();
    } catch (e) {}
    iframe.parentNode.removeChild(iframe);
};
onMounted(() => {
    init();
    getQrCodeUrl();
});
onUnmounted(destroyIframe);
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    .header {
        padding: 12px 24px;
        background-color: #fff;
        text-align: right;
    }
    .main {
        height: calc(100% - 56px);

        .el-scrollbar {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
        }
    }

    .phone {
        width: 375px;
        margin: 64px 0;
        background: #f9f9f9;
        box-shadow: 0px 4px 18px 0px #cccccc;
    }
    .qrcode {
        position: absolute;
        top: 120px;
        right: 10%;
        width: 240px;
        height: 276px;
        background: #ffffff;
        box-shadow: 0px 4px 18px 0px #cccccc;
        .title {
            padding: 17px 0;
            border-bottom: 1px solid #eaeaea;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            line-height: 22px;
        }
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24px 0 19px;
            .el-image {
                width: 140px;
                height: 140px;
            }
            .desc {
                margin-top: 16px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
            }
        }
    }
}
</style>
